<template>
  <div>
    <Header ref="headNav"></Header>
    <!--main开始-->
    <div class="mainBox w1200 bc mt20 clearfix mb15">
      <userSideMenu :flag="'set'" ref="userSide"></userSideMenu>
      <div class="mainRight fr w930">
        <!--收藏的游记-->
        <div class="br2 bg100 pb60">
          <!--title-->
          <h1 class="h60 bb90  c60 clearfix " id="test">
            <a :class="(tagIndex === 0)?'ml30 fl h60 f18 fm-yahei c60 lh60  hoverborder_grn_bottom curborder_grn_bottom':'ml30 fl h60 f18 fm-yahei c60 lh60  hoverborder_grn_bottom' " href="javascript:void(0);" @click="getUserInfo">个人资料</a>
            <a :class="(tagIndex === 1)?'fl h60 f18 fm-yahei  lh60 c60 ml120 hoverborder_grn_bottom curborder_grn_bottom':'fl h60 f18 fm-yahei  lh60 c60 ml120 hoverborder_grn_bottom' " href="javascript:void(0);" @click="getSafeInfo">账号安全</a>
          </h1>
          <!--list-->
          <ul class="w880 pl25 pr25  fm-yahei letter1 pointer c7 f16 fm-yahei" v-show="tagIndex===0">
            <li class="pt20 pb20 bb90 c60 clearfix ">
              <span class="fl lh80 w130">头像</span>
              <img class="fl br2 w80 h80 mr25" :src="userInfo['imgUrl']" alt="" style="border-radius: 40px;"/>
              <a href="javascript:void(0);" class=" fr mt25 bg_grn_119c5b f14  c100 h30 lh30 pl15 pr15 br2 hoverbg_orgred" @click="edit('headPic')">修改</a>
            </li>
            <li class="pt20 pb20 bb90 clearfix ">
              <span class="fl c60 f16 lh80 w130">昵称</span>
              <span class="fl c0 f18 lh80 mr80">{{userInfo['nickName']}}</span>
              <a href="javascript:void(0);" class=" fr mt25 bg_grn_119c5b f14  c100 h30 lh30 pl15 pr15 br2 hoverbg_orgred" @click="edit('nickName')">修改</a>
            </li>
            <li class="pt20 pb20 bb90 clearfix ">
              <span class="fl c60 f16 lh80 w130">性别</span>
              <span class="fl c0 f18 lh80 mr80">{{userInfo['sex']==1?'男':'女'}}</span>
              <a href="javascript:void(0);" class=" fr mt25 bg_grn_119c5b f14  c100 h30 lh30 pl15 pr15 br2 hoverbg_orgred" @click="edit('sex')">修改</a>
            </li>
            <li class="pt20 pb20 bb90 clearfix ">
              <span class="fl c60 f16 lh80 w130">生日</span>
              <span class="fl c0 f18 lh80 mr80">{{(userInfo['birthday']!=null)?userInfo['birthday'].substring(0,10):""}}</span>
              <a href="javascript:void(0);" class=" fr mt25 bg_grn_119c5b f14  c100 h30 lh30 pl15 pr15 br2 hoverbg_orgred" @click="edit('birthday')">修改</a>
            </li>
            <li class="pt20 pb20 bb90 clearfix ">
              <span class="fl c60 f16 lh80 w130">地址</span>
              <span class="fl c0 f18 lh80 mr80">{{userInfo['country']}} {{userInfo['province']}} {{userInfo['city']}} {{userInfo['region']}}</span>
              <a href="javascript:void(0);" class=" fr mt25 bg_grn_119c5b f14  c100 h30 lh30 pl15 pr15 br2 hoverbg_orgred" @click="edit('map')">修改</a>
            </li>
            <li class="pt20 pb20 bb90 clearfix ">
              <span class="fl c60 f16 lh80 w130">个性签名</span>
              <span class="fl c0 f18 lh80 mr80">{{userInfo['personSign']}}</span>
              <a href="javascript:void(0);" class=" fr mt25 bg_grn_119c5b f14  c100 h30 lh30 pl15 pr15 br2 hoverbg_orgred" @click="edit('sign')">修改</a>
            </li>
          </ul>
          <ul class="w880 pl25 pr25  fm-yahei letter1 pointer c7 f16 fm-yahei" v-show="tagIndex===1">
            <li class="pt20 pb20 bb90 clearfix ">
              <span class="fl c60 f16 lh80 w130">手机</span>
              <span class="fl c0 f18 lh80 mr80">{{regPhone(userInfo['mobile'])}}</span>
              <a href="javascript:void(0);" class=" fr mt25 bg_grn_119c5b f14  c100 h30 lh30 pl15 pr15 br2 hoverbg_orgred" @click="edit('phone')">修改</a>
            </li>
            <li class="pt20 pb20 bb90 clearfix ">
              <span class="fl c60 f16 lh80 w130">密码</span>
              <span class="fl c0 f18 lh80 mr80">**********</span>
              <a href="javascript:void(0);" class=" fr mt25 bg_grn_119c5b f14  c100 h30 lh30 pl15 pr15 br2 hoverbg_orgred" @click="edit('pass')">修改</a>
            </li>
            <li class="pt20 pb20 bb90 clearfix ">
              <span class="fl c60 f16 lh80 w130">绑定QQ</span>
              <span class="fl c0 f18 lh80 mr80">{{(UnionStatus.qQStatus===0)?'未绑定':'已绑定'}}</span>
              <a href="javascript:void(0);" class=" fr mt25 bg_grn_119c5b f14  c100 h30 lh30 pl15 pr15 br2 hoverbg_orgred" @click="editBound(0)">{{(UnionStatus.qQStatus===0)?'绑定':'解绑'}}</a>
            </li>
            <li class="pt20 pb20 bb90 clearfix ">
              <span class="fl c60 f16 lh80 w130">绑定微信</span>
              <span class="fl c0 f18 lh80 mr80">{{(UnionStatus.weiXinStatus===0)?'未绑定':'已绑定'}}</span>
              <a href="javascript:void(0);" class=" fr mt25 bg_grn_119c5b f14  c100 h30 lh30 pl15 pr15 br2 hoverbg_orgred" @click="editBound(1)">{{(UnionStatus.weiXinStatus===0)?'绑定':'解绑'}}</a>
            </li>
          </ul>
        </div><!--热门活动结束-->

      </div><!--mainRight结束-->
    </div>
    <loading v-show="loadState"></loading>
    <!--main结束-->
    <Footer></Footer>
    <!--修改个人资料弹出框-->
    <div id="alertBox" v-show="alertState">
      <div id="alertCon" ref="drag">
        <p class="alertTit">
          {{alertTit}}
          <img src="static/images/closeX-15.png" alt="" @click="closeAlert">
        </p>
        <div class="alertMainCon">
          <div id="editPic" v-if="alertType === 'headPic'">
              <cutImg ref="cutImg"></cutImg>
          </div>
          <input type="text" class="nickname" v-if="alertType==='nickName'" v-model="setUserData['nickName']">
          <el-radio-group v-model="setUserData['sex']" v-if="alertType==='sex'" class="sexBox">
            <el-radio label="1">男</el-radio>
            <el-radio label="2">女</el-radio>
          </el-radio-group>
          <div v-if="alertType==='birthday'" class="birthdayBox">
            <el-date-picker
              v-model="setUserData['birthday']"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </div>
          <div v-if="alertType==='map'">
            <selectMap @selectMapFun="selectMap" :region="1" @loadFun="loadFun"></selectMap>
          </div>
          <div v-if="alertType==='sign'">
            <textarea name="" id="userSign" v-model="setUserData['personSign']"></textarea>
          </div>
          <div v-if="alertType==='phone'" id="mobileBox">
            <ul class="ml30 mt30 w438">
              <li class="mt30 pr">
                <input class="pl30 bg96 b90 h40 w406 br2 " type="text" placeholder="请输入新手机号" v-model="editMobile['newMobile']"/>
              </li>
              <li class="mt30 ">
                <div class="bg96 b90 h40 w426 br2 pr tl">
                  <div id="dragedBox" class="fl"></div>
                  <div class="w40 h40 bg100 arrDoubleRight fl dragBox" id="dragBox"></div>
                  <span class="lh40 c60 noselect textIcon">请按住滑块拖动至最右边</span>
                </div>
              </li>
              <li class="mt30 clearfix">
                <input class="bg96 b90 h40 w250 pl30 br2 fl" type="text" placeholder="验证码" v-model="editMobile['code']" />
                <button class="bg96 b90 h40 w140 c60 fr hoverbg_grn pointer" @click="getCode">发送验证码</button>
              </li>
              <li class="mt30 pr">
                <input class="pl30 bg96 b90 h40 w406 br2 " type="text" placeholder="请输入密码" v-model="editMobile['pass']"/>
              </li>
            </ul>
          </div>
          <div v-if="alertType==='pass'">
            <ul class="ml30 mt30 w438">
              <li class="mt30 clearfix">
                <input class="bg96 b90 h40 w250 pl30 br2 fl" disabled type="text" :value="regPhone(userInfo['mobile'])" />
              </li>
              <li class="mt30 clearfix">
                <input class="bg96 b90 h40 w250 pl30 br2 fl" type="text" placeholder="验证码" v-model="editPass['code']" />
                <button class="bg96 b90 h40 w140 c60 fr hoverbg_grn pointer" @click="getChangePassCode">发送验证码</button>
              </li>
              <li class="mt30 pr">
                <input class="pl30 bg96 b90 h40 w406 br2 " type="password" placeholder="新密码" v-model="editPass['pass']"  />
                <img  class="abs-right-top mt15 mr30 pointer" src="static/images/eye-gray.png" width="18" height="11"/>
              </li>
            </ul>
          </div>
        </div>
        <p class="Btns" v-if="tagIndex === 0">
          <span class="sure" @click="subEditInfo">确定</span>
          <span class="cancel" @click="closeAlert">取消</span>
        </p>
        <p class="Btns" v-if="tagIndex === 1">
          <span class="safeSure" @click="subSafeEditInfo">确定</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
  import Header from "../../components/header";
  import Footer from "../../components/footer";
  import userSideMenu from "../../components/usersidemenu";
  import Utils from "../../assets/Util";
  import selectMap from "../../components/selectMap"
  import drag from "../../assets/drag"
  import md5 from 'crypto-js/md5'
  import cutImg from '../../components/cutImg'
  import loading from '../../components/loading'
  export default {
    name: "userInfo",
    components: {
      Header,
      Footer,
      userSideMenu,
      selectMap,
      cutImg,
      loading
    },
    data(){
      return {
        loadState:false,
        tagIndex:0,
        alertState:false,
        alertTit:"修改信息",
        alertType:'phone',
        UserSex:"",
        UserBirthday:"",
        UserProvince:"",
        UserCity:"",
        UserRegion:"",
        UserAddress:"",
        userInfo:{},
        UnionStatus:{
          "qQStatus": 0,
          "weiXinStatus": 0
        },
        setUserData:{
          "id": 0,
          "sex": 0,
          "mobile": "",
          "imgUrl": "",
          "nickName": "",
          "birthday": "",
          "countryID": 0,
          "provinceID": 0,
          "cityID": 0,
          "regionID": 0,
          "personSign": "",
          "token": ""
        },
        editMobile:{
          code:'',
          pass:'',
          newMobile:''
        },
        editPass:{
          code:"",
          mobile:"",
          userName:"",
          pass:""
        }
      }
    },
    mounted(){
      if (!Utils.isLogin){
        this.$router.push({path:'/'})
      }
      this.getInfo();
    },
    methods:{
      getUserInfo(){
        this.tagIndex = 0;
      },
      getSafeInfo(){
        this.tagIndex = 1;
        this.GetUnionStatus();
      },
      // 获取第三方账号的绑定情况
      GetUnionStatus(){
        let props = {
          url:"/User/GetUnionStatus",
          data:{
            "token": localStorage.getItem('token'),
            "userID": localStorage.getItem('uId')
          },
          sCallBack:res => {
            if(res.data.code === 1){
              this.UnionStatus = res.data.data;
            }else if(res.data.code === 4){
              this.refreshToken(this.GetUnionStatus);
            }
          },
          eCallBack:err => {
            this.$message.warning("获取第三方账号绑定状态失败");
            console.log(err);
          }
        }
        Utils.myRequest(props);
      },
      editBound(type){
        if (type === 1 && this.UnionStatus.weiXinStatus === 1){
          this.Unbound(type);
        }
        if(type === 0 && this.UnionStatus.qQStatus === 1){
          this.Unbound(type);
        }
      },
      // 第三方解绑
      Unbound(type){
        let props = {
          url:'/User/UnboundUnionID',
          data:{
            "token": localStorage.getItem("token"),
            "userID": localStorage.getItem("uId"),
            "type": type
          },
          sCallBack:res => {
            if(res.data.code === 1){
                this.$message.success("解绑成功");
                type === 0 ? this.UnionStatus.qQStatus = 0:this.UnionStatus.weiXinStatus = 0;
            }else if(res.data.code === 4){
                this.refreshToken(this.Unbound(type));
            }else{
               this.$message.warning("解绑失败");
            }
          },
          eCallBack:err => {
            this.$message.warning("解绑失败");
            console.log(err);
          }
        }
        Utils.myRequest(props);
      },
      // 获取用户的信息
      getInfo(){
        let props = {
          url:"/user/GetUserInfo",
          data:{
            "id": localStorage.getItem("uId"),
            "token": localStorage.getItem("token"),
            "userNameExtend": "",
            "userID": localStorage.getItem("uId")
          },
          sCallBack:res => {
            if(res.data.code === 1){
              this.userInfo = res.data.data
              this.setUserData.sex = this.userInfo.sex.toString();
              this.setUserData.birthday = this.userInfo.birthday;
              this.setUserData.id = this.userInfo.id;
              this.setUserData.mobile = this.userInfo.mobile;
              this.setUserData.imgUrl = this.userInfo.imgUrl;
              this.setUserData.nickName = this.userInfo.nickName;
              this.setUserData.countryID = this.userInfo.countryID;
              this.setUserData.provinceID = this.userInfo.provinceID;
              this.setUserData.cityID = this.userInfo.cityID;
              this.setUserData.regionID = this.userInfo.regionID;
              this.setUserData.personSign = this.userInfo.personSign;
            }else if(res.data.code === 4){
              this.refreshToken(this.getInfo());
            }
          },
          eCallBack:err => {
            this.$message.error("请求个人信息失败");
            console.log(err);
          }
        }
        Utils.myRequest(props);
      },
      // 刷新token
      refreshToken(callBack){
        let refresh = {
          url:"/user/GetToken",
          data:{
            token:localStorage.getItem('token')
          },
          sCallBack:(res) => {
            localStorage.setItem("token", res.data.data)
            callBack && callBack();
          },
          eCallBack:(err) => {
            console.log(err);
          }
        }
        Utils.myRequest(refresh);
      },
      // 格式化手机号
      regPhone(phoneNum){
        if(phoneNum){
          return phoneNum.substr(0, 3) + "****" + phoneNum.substr(7, 4);
        }
      },
      loadFun(){
        this.loadState = false;
      },
      selectMap(value){
        switch (value.type) {
          case "province":
            this.UserProvince = value['name'];
            this.setUserData.provinceID = value['provinceID'];
            break;
          case "city":
            this.UserCity = value['name'];
            this.setUserData.cityID = value['cityID'];
            break;
          case "region":
            this.UserRegion = value['name'];
            this.setUserData.regionID = value['regionID'];
            this.UserAddress = value['address'];
            break;
        }
      },
      edit(flag){
        this.alertState = true;
        this.alertType = flag;
        switch (flag) {
          case "nickName":
            this.alertTit = "修改昵称";
            break;
          case "sex":
            this.alertTit = "修改性别";
            break;
          case "birthday":
            this.alertTit = "修改生日";
            break;
          case "map":
            this.alertTit = "修改地址";
            break;
          case "sign":
            this.alertTit = "修改个性签名";
            break;
          case "headPic":
            this.alertTit = "修改头像";
            break;
          case "phone":
            this.alertTit = "修改手机号";
            let dragObj = this.$refs.drag;
            drag.captureTouch(dragObj);
            localStorage.setItem("dragState", 0);
            break
          case "pass":
            this.alertTit = "修改密码";
            break;
        }
      },
      // 提交修改的信息
      subEditInfo(){
        this.loadState = true;
        let that = this;
        let setUserData = null;
        if(this.alertType === "nickName" && this.setUserData.nickName === ""){
            this.$message.warning("昵称不能为空");
            return false;
        }
        if(this.alertType === "nickName"){
          setUserData = {
            nickName:this.setUserData['nickName'],
            id:localStorage.getItem("uId"),
            token:localStorage.getItem('token')
          }
        }else if(this.alertType === "headPic"){
          this.$refs.cutImg.sureCut(function (result) {
            if(result[0]['status'] === 1){
              that.setUserData.imgUrl = result[0]['url'];
              let userPicData = {
                imgUrl:result[0]['url'],
                id:localStorage.getItem("uId"),
                token:localStorage.getItem('token')
              }
              let props = {
                url:"/user/EditUser",
                data:userPicData,
                sCallBack:res => {
                  that.$refs.userSide.getUserInfo();
                  that.loadState = false;
                  if(res.data.code === 1){
                    if(that.alertType === 'headPic'){
                      that.userInfo['imgUrl'] = that.setUserData.imgUrl;
                      localStorage.setItem("userHeadPic", that.setUserData.imgUrl);
                      that.$refs.headNav.uploadStore();
                    }
                  }else if(res.data.code === 4) {
                    that.refreshToken(that.subEditInfo());
                  }else{
                    that.$message.error("修改信息失败");
                  }
                  that.alertState = false;
                },
                eCallBack:err => {
                  this.$message.error("修改信息失败");
                  console.log(err);
                }
              }
              Utils.myRequest(props);
            }
          });
        }else{
          delete this.setUserData.nickName;
          setUserData = this.setUserData;
        }
        this.setUserData.token = localStorage.getItem("token");
        let props = {
          url:"/user/EditUser",
          data:setUserData,
          sCallBack:res => {
            that.loadState = false;
            that.$refs.userSide.getUserInfo();
            if(res.data.code === 1){
              if (this.alertType === "nickName") {
                localStorage.setItem("userNickName", this.setUserData.nickName);
                this.userInfo['nickName'] = this.setUserData['nickName'];
                that.$refs.headNav.uploadStore();
              }
              if(this.alertType === 'sex'){
                this.userInfo['sex'] = this.setUserData['sex'];
              }
              if(this.alertType === 'birthday'){
                this.userInfo['birthday'] = this.setUserData['birthday'].getFullYear() + '-' + (this.setUserData['birthday'].getMonth() + 1) + "-" + this.setUserData['birthday'].getDate();
              }
              if(this.alertType === 'map'){
                this.userInfo['province'] = this.UserProvince;
                this.userInfo['city'] = this.UserCity;
                this.userInfo['region'] = this.UserRegion;
              }
              if(this.alertType === "sign"){
                this.userInfo['personSign'] = this.setUserData['personSign'];
              }
              if(this.alertType === 'headPic'){
                this.userInfo['imgUrl'] = this.setUserData.imgUrl;
              }
             }else if(res.data.code === 4) {
              this.refreshToken(this.subEditInfo());
            }else{
              this.$message.error("修改信息失败");
            }
            this.alertState = false;
          },
          eCallBack:err => {
            this.$message.error("修改信息失败");
            console.log(err);
          }
        }
        if(this.alertType !== "headPic"){
          Utils.myRequest(props);
        }
      },
      closeAlert(){
        this.alertState = false;
      },
      // 获取验证码
      getCode(){
        let zergTel = /^1(3|4|5|7|8)\d{9}$/;
        if (this.editMobile['newMobile'] === "" || !zergTel.test(this.editMobile['newMobile'])){
          this.$message.warning("请填写正确的手机号");
          return false;
        }
        if(localStorage.getItem("dragState") == 0){
          this.$message.warning("请滑动验证");
          return false;
        }
        let props = {
          url:"/Sms/SendEditMobileCode",
          data:{
            "mobileNew": this.editMobile['newMobile'],
            "token": localStorage.getItem("token"),
            "mobile": this.setUserData['mobile']
          },
          sCallBack:res => {
            if(res.data.code === 1){
              this.$message.success("发送成功");
            }else if(res.data.code === 4){
              this.refreshToken(this.getCode());
            }else{
              this.$message.warning(res.data.message);
            }
          },
          eCallBack:err => {
            this.$message.error("获取验证码失败");
            console.log(err);
          }
        }
        Utils.myRequest(props);
      },
      subSafeEditInfo(){
        if(this.alertType === 'phone'){
          this.editMobilefun();
        }else if(this.alertType === 'pass'){
          this.subNewPass();
        }
      },
      // 提交手机号修改信息
      editMobilefun(){
        let zergTel = /^1(3|4|5|7|8)\d{9}$/;
        if (this.editMobile['newMobile'] === "" || !zergTel.test(this.editMobile['newMobile'])){
          this.$message.warning("请填写正确的手机号");
          return false;
        }
        if(localStorage.getItem("dragState") == 0){
          this.$message.warning("请滑动验证");
          return false;
        }
        if(this.editMobile['code'] === ""){
          this.$message.warning("请输入验证码");
          return false;
        }
        if(this.editMobile['pass'] === ""){
          this.$message.warning("请输入密码");
          return false;
        }
        let props = {
          url:"/user/EditMobile",
          data:{
            "mobile": this.userInfo['mobile'],
            "mobileNew": this.editMobile['newMobile'],
            "mobilePassword": this.setmd5(this.userInfo['mobile'], this.editMobile['pass']),
            "mobilePasswordNew": this.setmd5(this.editMobile['newMobile'], this.editMobile['pass']),
            "code": this.editMobile['code'],
            "token": localStorage.getItem("token"),
            "lowerMobilePassword": this.editMobile['pass'].toLowerCase()
          },
          sCallBack:res => {
            if (res.data.code === 1){
              this.$message.success("修改成功");
              this.userInfo.mobile = this.editMobile['newMobile'];
              this.alertState = false;
            }else if(res.data.code === 4){
              this.refreshToken(this.editMobilefun);
            }else{
              this.$message.warning(res.data.data);
            }
          },
          eCallBack:err => {
            this.$message.error("手机号修改失败");
            console.log(err);
          }
        }
        Utils.myRequest(props);
      },
      // 修改密码获取验证码
      getChangePassCode(){
        let props = {
          url:"/Sms/SendEditPwdCode",
          data:{
            "mobile": this.setUserData['mobile']
          },
          sCallBack:res => {
            if(res.data.code === 1){
              this.$message.success("发送成功");
            }else{
              this.$message.warning(res.data.data);
            }
          },
          eCallBack:err => {
            this.$message.error("获取验证码失败");
            console.log(err);
          }
        }
        Utils.myRequest(props);
      },
      // 修改密码提交验证账号
      subNewPass(){
        if(this.editPass['code'] === ""){
            this.$message.warning("请输入验证码");
            return false;
        }
        let validateMobileProps = {
          url:"/user/ValidateMobile",
          data:{
            "mobile": this.userInfo['mobile'],
            "code": this.editPass['code']
          },
          sCallBack:res => {
            if(res.data.code === 1){
              this.editPass.mobile = res.data.data.mobile;
              this.editPass.userName = res.data.data.userName;
              this.changePass();
            }else{
              this.$message.warning("账号验证失败");
            }
          },
          eCallBack:err => {
            this.$message.warning("账号验证失败");
            console.log(err);
          }
        }
        Utils.myRequest(validateMobileProps);
      },
      // 修改密码提交新的信息
      changePass(){
        if (this.editPass.pass === ""){
          this.$message.warning("请输入新的密码");
          return false;
        }
        let props = {
          url:"/user/EditPassword",
          data:{
            "mobile": this.editPass.mobile,
            "password": this.setmd5(this.editPass.userName, this.editPass.pass),
            "userName": this.editPass.userName,
            "mobilePassword": this.setmd5(this.editPass.mobile, this.editPass.pass)
          },
          sCallBack:res => {
            if (res.data.code === 1){
              this.$message.success("密码修改成功");
              this.alertState = false;
            }else{
              this.$message.warning("密码修改失败[" + res.data.data + "]");
            }
          },
          eCallBack:err => {
            this.$message.warning("密码修改失败");
            console.log(err);
          }
        }
        Utils.myRequest(props);
      },
      // md5加密转换
      setmd5(mobile, password){
        return md5(mobile + password).toString()
      }
    }
  }
</script>

<style scoped>
#alertBox{
  width:100vw;
  height:100vh;
  position: fixed;
  top:0px;
  left: 0px;
  background: rgba(0,0,0,0.5);
}
  #alertCon{
    width:500px;
    background: #fff;
    border-radius:4px;
    position: absolute;
    top:300px;
    left:50%;
    margin-left:-250px;
  }
  .alertTit{
    width: 100%;
    line-height: 45px;
    text-indent: 15px;
    font-size:16px;
    border-bottom: 1px solid #E5E5E5;
  }
  .alertTit img{
    display: inline-block;
    width:15px;
    float: right;
    margin:15px 15px;
    cursor:pointer;
  }
  .Btns{
    width:100%;
    height:60px;
    display: flex;
    justify-content: space-around;
    border-top:1px solid #E5E5E5;
  }
  .Btns span{
    display: block;
    width:80px;
    line-height: 35px;
    text-align: center;
    font-size:14px;
    height:35px;
    margin-top: 12px;
    border-radius:4px;
    cursor: pointer;
  }
  .sure{
    background:#119C5B;
    color:#fff;
  }
  .cancel{
    border:1px solid #999999;
  }
  .alertMainCon{
    padding:30px 0px;
  }
  #editPic{
    width:100%;
    height:300px;
    margin:0 auto;
  }
  .nickname{
    width:80%;
    height:40px;
    display: block;
    background:#F5F5F5;
    margin:0 auto;
    text-indent:15px;
  }
  .sexBox{
    margin:0 auto;
    width:115px;
    display:block;
  }
  .birthdayBox{
    width:220px;
    margin:0 auto;
  }
  #userSign{
    display: block;
    width:80%;
    margin:0 auto;
    background:#F5F5F5;
    border-radius:4px;
    height:50px;
    line-height: 25px;
    padding:10px;
    resize: none;
  }
  .safeSure{
    width:80% !important;
    background:#119C5B;
    color:#fff;
  }
  .dragBox{
    cursor: move;
    float:left;
    position:absolute;
    z-index: 1;
    top:0px;
    left:0px;
  }
  #dragedBox{
    width:0px;
    height:100%;
    background:#119C5B;
    position: absolute;
    top:0px;
    left:0px;
    z-index: 1;
    text-align: center;
    color:#fff;
    line-height: 40px;
    font-size:14px;
  }
  .textIcon{
    width:100%;
    height:100%;
    display: block;
    position: absolute;
    left:0px;
    top:0px;
    text-align: center;
  }
.noselect {

  -webkit-touch-callout: none; /* iOS Safari */

  -webkit-user-select: none; /* Chrome/Safari/Opera */

  -khtml-user-select: none; /* Konqueror */

  -moz-user-select: none; /* Firefox */

  -ms-user-select: none; /* Internet Explorer/Edge */

  user-select: none;
}
</style>
